import React from 'react';
import { observer } from 'mobx-react';
import Input from './Input';
import InputNumber from './InputNumber';
import Select from './Select';
import Checkbox from './Checkbox';
import Browser from './Browser';
import WeaDatePicker from './WeaDatePicker';
import WeaTimePicker from './WeaTimePicker';
import WeaTextarea from './WeaTextarea';
import Upload from './Upload'
import WeaDateTimePicker from './WeaDateTimePicker';
export interface TableCellProps {
    field: any;
    onChange: (value,id) => void;
    canEdit: boolean;
    currentEditFieldid: string;
    changeCurrentEditFieldid: any;
    style: any;
}

@observer
export default class TableCell extends React.Component<TableCellProps, any> {
    constructor(props) {
        super(props);
    }


    renderCom = (viewAttr) => {
        const { field } = this.props;
        const fieldprop = field.prop;
        const { value, fieldhtmltype, type, qfws, browserProps } = fieldprop;
        let detailtype = '1';
        let reg: RegExp = new RegExp('');
        let otherParams: any = {};
        let conditionType = 'input';
        if (fieldhtmltype == '1') {//单行文本
            if (type == '2') {//整数
                reg = /^-?\d+$/;
                detailtype = '2';
                otherParams = { max: 2147483647, min: -2147483648 };
            } else if (type == '3' || type == '4' || type == '5') {//浮点数 金额转换 金额千分位
                reg = /^(-?\d+)(.[0-9]{0,2})?$/;
                switch (qfws) {
                    case 1: reg = /^(-?\d+)(.[0-9]{0,1})?$/; break;
                    case 2: reg = /^(-?\d+)(.[0-9]{0,2})?$/; break;
                    case 3: reg = /^(-?\d+)(.[0-9]{0,3})?$/; break;
                    case 4: reg = /^(-?\d+)(.[0-9]{0,4})?$/; break;
                    case 5: reg = /^(-?\d+)(.[0-9]{0,5})?$/; break;
                    case 6: reg = /^(-?\d+)(.[0-9]{0,6})?$/; break;
                    case 7: reg = /^(-?\d+)(.[0-9]{0,7})?$/; break;
                    case 8: reg = /^(-?\d+)(.[0-9]{0,8})?$/; break;
                    case 9: reg = /^(-?\d+)(.[0-9]{0,9})?$/; break;
                    case 10: reg = /^(-?\d+)(.[0-9]{0,10})?$/; break;
                    case 11: reg = /^(-?\d+)(.[0-9]{0,11})?$/; break;
                    case 12: reg = /^(-?\d+)(.[0-9]{0,12})?$/; break;
                    case 13: reg = /^(-?\d+)(.[0-9]{0,13})?$/; break;
                    case 14: reg = /^(-?\d+)(.[0-9]{0,14})?$/; break;
                    case 15: reg = /^(-?\d+)(.[0-9]{0,15})?$/; break;
                }
                detailtype = '2';
                otherParams = { max: 999999999999.999999999999, min: -999999999999.999999999999 };
            }
        } else if (fieldhtmltype == '5') {//选择框
            conditionType = 'select';
            detailtype = type;
        } else if (fieldhtmltype == '3') {//浏览按钮
            if (type == '2') {
                conditionType = 'date';
            } else if (type == '19') {
                conditionType = 'time';
            } else if (type == '290') {
                conditionType = 'datetime';
            } else {
                conditionType = 'browser';
                if (type && (type == '4' || type == '57' || type == '164' || type == '169' || type == '194' || type == '167' || type == '170' || type == '168')) {   //部门，多部门，分部，多分部，单点分权，分权单部门，分权多分部，分权多部门
                    browserProps.dataParams = { ...browserProps.dataParams, fromModule: "model" }
                    browserProps.destDataParams = { ...browserProps.dataParams, fromModule: "model" }
                }
            }
        } else if (fieldhtmltype == '2') {//多行文本
            if (type == '1') {
                conditionType = 'textarea';
            } else if (type == "2") {
                conditionType = 'htmlinput';
            }

        } else if (fieldhtmltype == '4') {//Check框
            conditionType = 'checkbox';
        } else if (fieldhtmltype == '6') {
            conditionType = 'weaupload';

        }

        if (conditionType == 'htmlinput') {
            return <span dangerouslySetInnerHTML={{ __html: value }}></span>
        } else if (conditionType == 'input') { //文本框
            if (detailtype == '2' || detailtype == '3') { //整数
                return (
                    <InputNumber
                        reg={reg}
                        value={value}
                        min={otherParams.min}
                        max={otherParams.max}
                        qfws={qfws}
                        onBlur={this.onBlur}
                        fieldhtmltype={fieldhtmltype}
                        fieldtype={type}
                        viewAttr={viewAttr}
                    />
                )
            } else {

                return (
                    <Input viewAttr={viewAttr}
                        value={value} onBlur={this.onBlur} />
                )
            }
        } else if (conditionType == 'checkbox') {
            return (
                <Checkbox viewAttr={viewAttr} value={value} onChange={this.onChange} />
            )

        } else if (conditionType == 'date') {
            return (
                <WeaDatePicker
                    viewAttr={viewAttr}
                    value={value}
                    onChange={this.onChange}
                />
            )
        } else if (conditionType == 'textarea') {
            return (
                <WeaTextarea
                    viewAttr={viewAttr}
                    value={value}
                    onBlur={this.onBlur}
                />
            )
        } else if (conditionType == 'time') {
            return (
                <WeaTimePicker
                    viewAttr={viewAttr}
                    value={value}
                    onChange={this.onChange}
                />
            )
        } else if (conditionType == 'datetime') {
            return (
                <WeaDateTimePicker
                    viewAttr={viewAttr}
                    value={value}
                    onChange={this.onChange}
                />
            )
        } else if (conditionType == 'select') { //选择框字段
            return (
                <Select detailtype={detailtype}
                    viewAttr={viewAttr}
                    options={fieldprop.options ? fieldprop.options.slice() : []}
                    onChange={this.onChange}
                    value={value}
                />
            )
        } else if (conditionType == 'browser') {
            return (
                <Browser
                    viewAttr={viewAttr} value={value} valueSpan={""} browserConditionParam={fieldprop.browserProps} onChange={this.browserChange} />
            )
        } else if (conditionType == 'weaupload') {
            return (
                <Upload viewAttr={viewAttr}
                    key={field.name} fieldtype={type} uploadMap={fieldprop.uploadMap} onChange={this.onChange} />)
        }
        return (
            <Input viewAttr={viewAttr}
                value={value}
                onBlur={this.onBlur}
            />
        )
    }

    browserChange = (ids, names, objs) => {
        const { field } = this.props;
        const fieldprop = field.prop;
        fieldprop.browserProps.replaceDatas = objs.map(item => {
            return { id: item.id, name: item.name };
        });
        this.onChange(ids, names);
    }

    onBlur = (ids) => {
        const { field } = this.props;
        const fieldprop = field.prop;
        const { value } = fieldprop;
        if (ids != value) {
            fieldprop.value = ids;
            this.props.onChange(field.id,ids);
        }
        this.props.changeCurrentEditFieldid('');
    }

    onChange = (ids, names?) => {
        const { field } = this.props;
        const fieldprop = field.prop;
        const { fieldhtmltype, type } = fieldprop;
        if (ids instanceof Array) {
            ids = ids.join(',');
        }
        fieldprop.value = ids;
        this.props.onChange(field.id,ids);
        if (fieldhtmltype == '5' && type == '2') {
            return;//如果是复选框选择一个值后先不恢复只读状态
        }
        this.props.changeCurrentEditFieldid('');
    }

    render() {
        const { field, canEdit,  style, currentEditFieldid } = this.props;
        const { prop } = field;
        
        let viewAttr = currentEditFieldid == field.id ? '2' : '1';
        let customStyle = { overflow: 'hidden' };
        if (viewAttr == '2') {
            customStyle = { overflow: 'inherit' };
        } else {
            customStyle = { overflow: 'hidden' };
        }

        let canNotEdit=false;
        if(prop){
            const { fieldhtmltype, type} = prop; 
            if(!fieldhtmltype||!type||fieldhtmltype=='2'&&type=='2'){
                canNotEdit=true;
            }
        }else{
            canNotEdit=true;
        }

        return <div style={{ ...style, display: 'flex', height: '40px' }}>
            <div style={{ float: 'left', lineHeight: '30px', textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden'}}>{field.desc} : </div>
            <div className="fieldvalueCell" style={{
                lineHeight: '30px', textAlign: 'left', paddingLeft: '5px', height: '30px', minWidth: '100px', ...customStyle
            }} onClick={this.editClick}>
                {prop ? this.renderCom(viewAttr) : <span dangerouslySetInnerHTML={{ __html: field.content }}></span>}
                {viewAttr=='1'&&canEdit&&!canNotEdit&&<i style={{marginLeft:'5px'}} className="icon-coms-edit"></i>}
            </div>

        </div>

    }

    editClick = (e) => {
        const { field, canEdit, changeCurrentEditFieldid } = this.props;
        if (canEdit) {
            changeCurrentEditFieldid(field.id);
        }
        let event = e || window.event;
        event.stopPropagation();
    }
}
